<template>
    <div class="father">
        <h3>父组件</h3>
        <div>
            <div>汽车：{{ car.brand }}</div>
            <div>金额： {{ money }}</div>
        </div>

        <Child/>
    </div>
</template>

<script setup lang="ts" name="Father">
import Child from './Child.vue'
import {reactive,ref,provide} from 'vue'
let car = reactive({
    brand: '劳斯莱斯',
    price: 100
});
let money = ref(100)

function updateMoney(value:number) {
    money.value -= value
}


// 向后代提供数据
provide('moneyContent',{money,updateMoney})

</script>

<style scoped>
    .father{
        background-color: rgb(165, 164, 164);
        padding: 20px;
        border-radius: 10px;
    }
</style>